@import "../../designer/common/DesignerStyle.less";

.radio-buttons {
  display: flex;
  flex-direction: row;

  .radio-button {
    display: flex;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;

    input[type="radio"] {
      display: none;
    }

    .radio-circle {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border: 2px solid #aaa;
      position: relative;
      margin-right: 5px;
    }

    .radio-circle::before {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #ddd;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: all 0.2s ease-in-out;
    }

    input[type="radio"]:checked + .radio-circle::before {
      transform: translate(-50%, -50%) scale(1);
    }

    input[type="radio"]:checked + .radio-circle::before {
      background-color: #aeaeae;
    }

    .radio-label {
      color: @lc-config-value;
      font-size: @lc-font-sm;
      font-weight: bold;
    }
  }

  .radio-button:hover .radio-circle {
    border-color: #555;
  }

  .radio-button:hover input[type="radio"]:checked + .radio-circle::before {
    background-color: #555;
  }

}




